<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/WEB-INF/templates/template.xhtml"
	xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
	<ui:define name="content">
		<h1><h:outputText value="Hello From JSF" /></h1>
		Message : #{homeBean.message}<br />
		<br />
		<h2>Tasks</h2>	
		

		<h:form id="idTaskHome" styleClass="form">
			<div class="grid-8-12">
				<h:messages style="color : red;padding-left : 8px" />
			</div>
			  <div class="grid-8-12">
				<h:outputLabel class="form-lbl"  value="Nome"/>				
				<h:inputText styleClass="form-txt" required="true" requiredMessage="Favor inoformar o nome:" value="#{taskHome.task.nome}" id="nome" />
			 </div>	
			  <div class="grid-8-12">
				<h:outputLabel class="form-lbl"  value="#{msg.descricao}"/>
			   <h:inputTextarea cols="30" rows="10" required="true" requiredMessage="Favor inoformar a Descrição:" value="#{taskHome.task.description}" id="taskDesc" />
			</div>	
			<div class="field-clear"></div>
			 <div class="grid-2-12">
			 	<h:selectOneMenu styleClass="form-txt" value="#{taskHome.task.sexo}">
			 		<f:selectItem itemLabel="Masculino" itemValue="M"/>
			 		<f:selectItem itemLabel="Feminino" itemValue="F"/>
			 	</h:selectOneMenu>
			 </div>	
			 <div class="field-clear"></div>
			 <div class="grid-2-12">
				<h:commandButton styleClass="form-button" action="#{taskHome.saveTask}" value="Add" />
			
			</div>
			<div class="field-clear"></div>
			<div class="grid-2-12" style="padding-top: 22px">
				<a4j:commandButton limitRender="true"
					style="width: 100px; height: 20px" value="Adicioar"
					action="#{taskHome.saveTask}" />
			</div>
			<div class="field-clear"></div>
			 <rich:dataTable style="width: 300px" id="taskTable"  var="task" value="#{taskHome.tasks}" >
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="ID" />
						</f:facet>
						<h:outputText value="#{task.id}" />
					</rich:column>
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="Nome" />
						</f:facet>
						<h:outputText value="#{task.nome}" />
					</rich:column>
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="Descrição" />
						</f:facet>
						<h:outputText value="#{task.description}" />
					</rich:column>
				</rich:dataTable>
			
		</h:form>

	</ui:define>
</ui:composition>
